import React, { useEffect } from 'react'
import {BannersWrapper}  from './style'
import propTypes from 'prop-types'
import Swiper from 'swiper'
import {Link} from 'react-router-dom'


export default function Banners({banners}) {
  let swiper = null;
  useEffect(() => {
    // swiper 不能进行多次实例化
    // console.log('----1111');
    if(!swiper){
      swiper = new Swiper('.btn-banners',{
            loop:true,
            pagination:{
              el:'.swiper-pagination'  // 幻灯片滑块
            }
          }) 
    } 
  },[])

  const renderBanneraPage1 =() => {
    let items = banners.slice(0,10);
    return items.map(item => {
      return (
        <Link 
          to="/eleme/all"
          className="swiper-item"
          key={item.id}>
            <div>
              <p>
                <img src={item.img} alt="" />
              </p>
              <span>
                {item.title}
              </span>
            </div>
          </Link>
      )
    })
  }
  const renderBanneraPage2 =() => {
    let items = banners.slice(10);
    return items.map(item => {
      return (
        <Link 
          to="/eleme/all"
          className="swiper-item"
          key={item.id}>
            <div>
              <p>
                <img src={item.img} alt="" />
              </p>
              <span>
                {item.title}
              </span>
            </div>
          </Link>
      )
    })
  }
  return (
    <BannersWrapper>
      <div className="btn-banners swiper-container">
        {/* 幻灯片 */}
        <div className="swiper-wrapper">

          <div className="swiper-slide">
            {renderBanneraPage1()}
          </div>
          <div className="swiper-slide">
          {renderBanneraPage2()}
          </div>
         
        </div>
        <div className="swiper-pagination"></div>
      </div>
    </BannersWrapper>
  )
}
// 判断request的数据是否传入，如果没传入就报错
Banners.propTypes = {
  banners:propTypes.array.isRequired
}